<template>
  <div>
    <bread-crumb :crumb="crumb"></bread-crumb>
    <el-card>
      <el-form
        :model="createModuleForm"
        :rules="createModuleFormRules"
        ref="createModuleFormRef"
        label-width="100px"
      >
        <el-form-item label="模块名称" prop="moduleName">
          <el-input v-model="createModuleForm.moduleName"></el-input>
        </el-form-item>
        <el-form-item label="模块描述" prop="moduleDesc">
          <el-input v-model="createModuleForm.moduleDesc"></el-input>
        </el-form-item>
        <el-form-item label="模块代码" prop="moduleCode">
          <el-input :rows="10" class="moduleCode" type="textarea" v-model="createModuleForm.moduleCode"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addPageModule()">添加</el-button>
          <el-button type="info" @click="resetcreateModuleForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import breadCrumb from '../../components/common/Breadcrumb'
export default {
  name: 'createpagemodule',
  components: {
    breadCrumb
  },
  data () {
    return {
      crumb: ['页面管理', '添加页面模块'],
      createModuleForm: {
        moduleName: '',
        moduleDesc: '',
        moduleCode: ''
      },
      createModuleFormRules: {
        moduleName: [
          { required: true, message: '请输入模块名', trigger: 'blur' }
        ],
        moduleDesc: [
          { required: true, message: '请输入模块描述', trigger: 'blur' }
        ],
        moduleCode: [
          { required: true, message: '请输入模块代码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 添加模块
    addPageModule () {
      this.$refs.createModuleFormRef.validate(valid => {
        if (!valid) {
          return false
        }
        // TODO: 等待添加接口
        console.log(this.createModuleForm)
      })
    },
    // 重置添加模块表单
    async resetcreateModuleForm () {
      const result = await this.$confirm('不否重置该表单', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (result === 'confirm') {
        this.$refs.createModuleFormRef.resetFields()
      } else {
        return this.$message.info('已中止重置表单操作')
      }
    }
  }
}
</script>
